<template>
  <!--课题(选题)信息（审核/详情）-->
  <div class="edu-page-warp topic-info">
    <el-card shadow="never">
      <el-row :gutter="20" type="flex" align="center" justify="space-between" style="margin:16px 0">
        <el-col>
          <span class="topic-title">基本信息</span>
          <span class="topic-title" style="margin-left: 200px;">变更后</span>
          <span class="topic-title" style="margin-left: 480px;">变更前</span>
        </el-col>
      </el-row>
      <!--基本信息-->
      <el-form :model="basicInfoForm" ref="basicInfoForm" label-position="right" label-suffix="：" :label-width="labelWidth" v-if="isExpand" :disabled="true">
        <el-row>
          <el-col :span="12">
            <el-form-item label="课题名称">
              <el-input v-model="basicInfoForm.applicationTeacherHis.projectName" maxlength="100" class="topic-input-select" placeholder="请输入"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="原课题名称">
              <el-input v-model="basicInfoForm.applicationTeacherEntity.projectName" maxlength="100" class="topic-input-select" placeholder="请输入"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="副标题">
              <el-input v-model="basicInfoForm.applicationTeacherHis.subtitleName" maxlength="100" class="topic-input-select" placeholder="请输入"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="原副标题">
              <el-input v-model="basicInfoForm.applicationTeacherEntity.subtitleName" maxlength="100" class="topic-input-select" placeholder="请输入"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="研究方向">
              <el-input v-model="basicInfoForm.applicationTeacherHis.researchDirection" class="topic-input-select" type="textarea" :rows="4" maxlength="200" show-word-limit placeholder="请输入"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="原研究方向">
              <el-input v-model="basicInfoForm.applicationTeacherEntity.researchDirection" class="topic-input-select" type="textarea" :rows="4" maxlength="200" show-word-limit placeholder="请输入"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col span="12">
            <el-form-item label="课题简介">
              <el-input v-model="basicInfoForm.applicationTeacherHis.introductionProject" class="topic-input-select" type="textarea" :rows="4" maxlength="200" show-word-limit placeholder="请输入"></el-input>
            </el-form-item>
          </el-col>
          <el-col span="12">
            <el-form-item label="原课题简介">
              <el-input v-model="basicInfoForm.applicationTeacherEntity.introductionProject" class="topic-input-select" type="textarea" :rows="4" maxlength="200" show-word-limit placeholder="请输入"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-form-item label="课题属性" class="topic-form-title"></el-form-item>
        <el-row>
          <el-col :span="12">
            <el-form-item label="毕业年份">
              <el-input v-model="basicInfoForm.applicationTeacherEntity.grade" class="topic-input-select" type="textarea"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="原毕业年份">
              <el-input v-model="basicInfoForm.applicationTeacherEntity.grade" class="topic-input-select" type="textarea"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="院系">
              <el-select v-model="basicInfoForm.applicationTeacherHis.college" disabled class="topic-input-select" clearable filterable placeholder="默认本院">
                <el-option v-for="item in source.collegeOptions" :key="item.collegeId" :label="item.collegeIdI18n" :value="item.collegeId"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="原院系">
              <el-select v-model="basicInfoForm.applicationTeacherEntity.college" disabled class="topic-input-select" clearable filterable placeholder="默认本院">
                <el-option v-for="item in source.collegeOptions" :key="item.collegeId" :label="item.collegeIdI18n" :value="item.collegeId"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="专业" prop="subjectId">
              <el-select v-model="basicInfoForm.applicationTeacherHis.subjectId" class="topic-input-select" clearable filterable placeholder="请选择">
                <el-option v-for="item in source.subjectOptions" :key="item.subjectId" :label="item.subjectName" :value="item.subjectId"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="原专业" prop="subjectId">
              <el-select v-model="basicInfoForm.applicationTeacherEntity.subjectId" class="topic-input-select" clearable filterable placeholder="请选择">
                <el-option v-for="item in source.subjectOptions" :key="item.subjectId" :label="item.subjectName" :value="item.subjectId"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="方向">
              <el-select v-model="basicInfoForm.applicationTeacherHis.direction" class="topic-input-select" clearable filterable placeholder="请选择">
                <el-option v-for="item in source.directionOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="原方向">
              <el-select v-model="basicInfoForm.applicationTeacherEntity.direction" class="topic-input-select" clearable filterable placeholder="请选择">
                <el-option v-for="item in source.directionOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="是否有校外导师" prop="outSide">
              <el-select v-model="basicInfoForm.applicationTeacherHis.outside" class="topic-input-select" clearable filterable placeholder="默认否">
                <el-option v-for="item in source.isTutorOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="是否有校外导师" prop="isOutside">
              <el-select v-model="basicInfoForm.applicationTeacherEntity.isOutside" class="topic-input-select" clearable filterable placeholder="默认否">
                <el-option v-for="item in source.isTutorOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="校外导师">
              <el-select v-model="basicInfoForm.applicationTeacherHis.outsideTeacherNum" class="topic-input-select" clearable filterable placeholder="请选择">
                <el-option v-for="item in source.outsideTutorOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="原校外导师">
              <el-select v-model="basicInfoForm.applicationTeacherEntity.outsideTeacherNum" class="topic-input-select" clearable filterable placeholder="请选择">
                <el-option v-for="item in source.outsideTutorOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-form-item label="课题情况" class="topic-form-title"></el-form-item>
        <el-row>
          <el-col :span="12">
            <el-form-item label="课题类型">
              <el-select v-model="basicInfoForm.applicationTeacherHis.projectType" class="topic-input-select" clearable filterable placeholder="请选择">
                <el-option v-for="item in source.subjectTypeOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="原课题类型">
              <el-select v-model="basicInfoForm.applicationTeacherEntity.projectType" class="topic-input-select" clearable filterable placeholder="请选择">
                <el-option v-for="item in source.subjectTypeOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          </el-row>
          <el-row>
          <el-col :span="12">
            <el-form-item label="课题来源">
              <el-select v-model="basicInfoForm.applicationTeacherHis.projectSourceId" class="topic-input-select" clearable filterable placeholder="请选择">
                <el-option v-for="item in source.subjectSourceOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="原课题来源">
              <el-select v-model="basicInfoForm.applicationTeacherEntity.projectSourceId" class="topic-input-select" clearable filterable placeholder="请选择">
                <el-option v-for="item in source.subjectSourceOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          </el-row>
          <el-row>
          <el-col :span="12">
            <el-form-item label="课题性质">
              <el-select v-model="basicInfoForm.applicationTeacherHis.projectNatureId" class="topic-input-select" clearable filterable placeholder="请选择">
                <el-option v-for="item in source.subjectNatureOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="原课题性质">
              <el-select v-model="basicInfoForm.applicationTeacherEntity.projectNatureId" class="topic-input-select" clearable filterable placeholder="请选择">
                <el-option v-for="item in source.subjectNatureOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          </el-row>
          <el-row>
          <el-col :span="12">
            <el-form-item label="其中社会实践情况">
              <el-select v-model="basicInfoForm.applicationTeacherHis.practiceSocialId" class="topic-input-select" clearable filterable placeholder="请选择">
                <el-option v-for="item in source.socialPracticeOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="原其中社会实践情况">
              <el-select v-model="basicInfoForm.applicationTeacherEntity.practiceSocialId" class="topic-input-select" clearable filterable placeholder="请选择">
                <el-option v-for="item in source.socialPracticeOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          </el-row>
          <el-row>
          <el-col :span="12">
            <el-form-item label="毕业设计（论文）地点">
              <el-input v-model="basicInfoForm.applicationTeacherHis.designPlace" maxlength="60" class="topic-input-select" placeholder="请输入"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="原毕业设计（论文）地点">
              <el-input v-model="basicInfoForm.applicationTeacherEntity.designPlace" maxlength="60" class="topic-input-select" placeholder="请输入"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>

    <!--审核 仅审核状态时("REVIEW_STU"/"REVIEW_TUTOR")可见-->
    <el-card shadow="never" v-if="REVIEW.includes(actionType)">
      <el-row :gutter="20" type="flex" align="center" justify="space-between" style="margin:16px 0">
        <el-col>
          <span class="topic-title">审核</span>
        </el-col>
      </el-row>
      <el-form :model="reviewForm" ref="reviewForm" :rules="reviewRules" label-position="right" label-suffix="：" :label-width="labelWidth">
        <el-form-item label="审核说明" prop="remark">
          <el-input v-model="reviewForm.remark" class="topic-input-select" type="textarea" :rows="3" maxlength="1000" show-word-limit placeholder="驳回时必填"></el-input>
        </el-form-item>
      </el-form>
      <div class="float-right bottom-btn">
        <el-button @click="onCancel">取消</el-button>
        <el-button type="danger" @click="onReject">驳回</el-button>
        <el-button type="primary" @click="onPass">通过</el-button>
      </div>
    </el-card>

    <!--审核进度 在申报("ADD"),编辑("EDIT"),查看分配课题("VIEW_ASSIGN"),查看课题信息("VIEW_INFO")状态时不可见-->
    <el-card shadow="never" v-if="REVIEW_PROGRESS.includes(actionType)">
      <el-row :gutter="20" type="flex" align="center" justify="space-between" style="margin:16px 0">
        <el-col>
          <span class="topic-title">审核进度</span>
          <span v-if="!isReviewExpand" @click="handleCommand('isReviewExpand')" class="topic-expand">
            <i class="el-icon-arrow-down el-icon--left"></i>
            {{ $t("message.unfold") }}
          </span>
          <span v-if="isReviewExpand" @click="handleCommand('isReviewExpand')" class="topic-expand">
            <i class="el-icon-arrow-up el-icon--left"></i>
            {{ $t("message.fold") }}
          </span>
        </el-col>
      </el-row>
      <el-table :data="progressData" stripe style="width: 100%">
          <el-table-column label="序号">
            <template slot-scope="scope">
              {{scope.$index+1}}
              .
            </template>
          </el-table-column>
          <el-table-column prop="time" label="操作时间">
            <template slot-scope="scope">{{ scope.row.time | formatDate }}</template>
          </el-table-column>
          <el-table-column prop="approvorName" label="操作人" />
          <el-table-column prop="groupStr" label="角色" />
          <el-table-column prop="result" label="审批结果">
            <template slot-scope="scope">
              <el-tag v-if="scope.row.result === 'COMMIT'" type="success">提交</el-tag>
            <el-tag v-if="scope.row.result === 'Process'" type="success">通过</el-tag>
            <el-tag v-if="scope.row.result === 'End'" type="info">已结束</el-tag>
            <el-tag v-if="scope.row.result === 'Reject'" type="warning">已驳回</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="content" label="审批说明" show-overflow-tooltip />
        </el-table>
    </el-card>
  </div>
</template>
<script>
import API from "common/src/api/underGraduationDesign/tutorDeclareSubject";
import filters from "common/src/filters";

export default {
  name: 'topicInfo',
  filters: {
    formatDate (date) {
      return filters.formatDate(date, "yyyy/MM/dd hh:mm:ss");
    }
  },
  props: {
    labelWidth: {
      type: String,
      default: "180px"
    },
    basicInfoForm: {
      type: Object,
      default: {}
    },
    reviewForm: {
      type: Object,
      default: {
        remark:''
      }
    },
    progressData: {
      type: Array,
      default: []
    },
    actionType: {
      type: String,
      default: ""
    }
  },
  data() {
    return {
      api: API,
      isExpand: true,
      isReviewExpand: true,
      source: {
        collegeOptions: [], // 学院
        subjectOptions: [], // 专业
        directionOptions: [], // 方向
        subjectSourceOptions: [], // 课题来源
        subjectNatureOptions: [], // 课题性质
        subjectTypeOptions: [{ // 课题类别
          label: "毕业论文",
          value: "毕业论文",
        }, {
          label: "毕业设计",
          value: "毕业设计",
        }],
        socialPracticeOptions: [], //其中社会时间情况
        outsideTutorOptions: [], // 校外导师
        innerTutorOptions: [], // 校内导师
        isTutorOptions: [{ // 是否有校外导师
          label: "是",
          value: true
        }, {
          label: "否",
          value: false
        }]
      },
      reviewRules: {
        remark: [
          { required: true, message: '请输入', trigger: 'blur' }
        ]
      },
      actionMap: {
        ADD: "新增课题",
        REVIEW_STU: "审核学生课题",
        REVIEW_TUTOR: "审核导师课题",
        EDIT: "编辑课题",
        VIEW_STU: "查看学生课题",
        VIEW_TUTOR: "查看导师课题",
        VIEW_TOPIC: "查看选题",
        VIEW_ASSIGN: "查看分配课题",
        VIEW_TUTOR_INFO: "查看课题信息-导师详情",
        VIEW_STU_INFO: "查看课题信息-学生详情",
        VIEW_STU_TOPIC_TUTOR: "查看学生选题-导师详情"
      },
      // 导师基本信息可见
      TUTOR_BASIC_INFO: ['REVIEW_TUTOR', 'VIEW_TUTOR', 'ADD', 'EDIT', 'VIEW_STU_TOPIC_TUTOR', 'VIEW_TUTOR_INFO'],
      // 学生基本信息可见
      STUDENT_BASIC_INFO: ['REVIEW_STU', 'VIEW_STU', 'VIEW_STU_INFO'],
      // 选题可见
      TOPIC_VIEW: ['VIEW_ASSIGN', 'VIEW_TOPIC'],
      // 审核可见
      REVIEW: ['REVIEW_TUTOR', 'REVIEW_STU'],
      // 审核进度可见
      REVIEW_PROGRESS: ['REVIEW_STU', 'REVIEW_TUTOR', 'VIEW_STU', 'VIEW_TUTOR', 'VIEW_TOPIC'],
      // 查看详情
      VIEW: ['VIEW_STU', 'VIEW_TUTOR', 'VIEW_TOPIC', 'VIEW_ASSIGN', 'VIEW_STU_TOPIC_TUTOR', 'VIEW_TUTOR_INFO', 'VIEW_STU_INFO', 'REVIEW_TUTOR', 'REVIEW_STU']
    };
  },
  created() {
    this.reviewForm.remark='';
    this.getCollege();
    this.getOutsideTutorInfo();
    this.getSubjectSource();
    this.getSubjectNature();
    this.getSocialPractice();
    // console.info(this.basicInfoForm);
    this.handleCollegeChange();
    this.handleSubjectChange();
  },
  mounted() { },
  methods: {
    handleCommand(expName) {
      this[expName] = !this[expName];
    },
    // 查学院
    getCollege() {
      this.api.getCollege().then(res => {
        this.source.collegeOptions = res;
      });
    },
    // 选择年份和学院查专业
    handleCollegeChange() {
        const params = {
          grade: this.basicInfoForm.applicationTeacherHis.grade,
          college: this.basicInfoForm.applicationTeacherHis.college
        };
        this.api.getSubject(params).then(res => {
          this.source.subjectOptions = res.data;
        }).catch();
    },
    // 选择年份和专业查方向
    handleSubjectChange() {
      this.basicInfoForm.direction = "";
      this.source.directionOptions = [];
      const params = {
          keyWord: "",
          pageNum_: 1,
          pageSize_: 50,
          grade: this.basicInfoForm.applicationTeacherHis.admissionGrade,
          professionCode: this.basicInfoForm.applicationTeacherHis.subjectId
      };
      this.api.getDirection(params).then(res => {
          this.source.directionOptions = this.optionFormat(res.data.list, "name", "code");
      }).catch();
    },
    // 查校外导师
    getOutsideTutorInfo() {
      const params = {
        pageNum_: 0,
        pageSize_: 1000
      };
      this.api.getOutsideTutor(params).then(res => {
        this.source.outsideTutorOptions = this.optionFormat(res.data.list, "name", "id");
      }).catch();
    },
    // 查校内导师
    getInnerTutorInfo() {
      const params = {
        pageNum_: 0,
        pageSize_: 1000
      };
      this.api.getInnerTutor(params).then(res => {
        this.source.innerTutorOptions = this.optionFormat(res.data.list, "name", "code");
      }).catch();
    },
    // 查课题来源
    getSubjectSource() {
      const params = {
        year: this.basicInfoForm.grade
      };
      this.api.getSource(params).then(res => {
        this.source.subjectSourceOptions = this.optionFormat(res.data, "subjectSource", "id");
      }).catch();
    },
    // 查课题性质
    getSubjectNature() {
      const params = {
        year: this.basicInfoForm.grade
      };
      this.api.getNature(params).then(res => {
        this.source.subjectNatureOptions = this.optionFormat(res.data, "subjectProperties", "id");
      }).catch();
    },
    // 查社会实践
    getSocialPractice() {
      const params = {
        year: this.basicInfoForm.grade
      };
      this.api.getPractice(params).then(res => {
        this.source.socialPracticeOptions = this.optionFormat(res.data, "sociaPractice", "id");
      }).catch();
    },
    // 下拉数据 格式化
    optionFormat(optionList = [], label = "", value = "") {
      let dataset = [];
      for (let i = 0; i < optionList.length; i++) {
        const optionObj = {
          label: optionList[i][label],
          value: optionList[i][value]
        };
        dataset.push(optionObj);
      }
      return dataset;
    },
    // 保存
    onSave() {
      const params = {
        actionType: this.actionType,
        data: this.basicInfoForm
      };
      this.$emit("topic-save", params);
    },
    // 提交
    onSubmit() {
      this.$emit("topic-submit", this.basicInfoForm);
    },
    // 通过
    onPass() {
      let params = {};
      params = {
        no: this.basicInfoForm.applicationTeacherHis.flowNo,
        type: 1,
        content: ""
      };
      this.reviewRules.remark = [];
      this.$refs.reviewForm.clearValidate();
      this.$emit("topic-pass", params);
    },
    // 驳回
    onReject() {
      let params = {};
      params = {
        no: this.basicInfoForm.applicationTeacherHis.flowNo,
        type: 2,
        content: this.reviewForm.remark
      };
      if ("" != this.reviewForm.remark) {
        this.reviewRules.remark = [];
      }
      //this.reviewRules.remark = [{ required: true, message: '请输入', trigger: 'blur' }];
      this.$refs.reviewForm.validate(valid => {
        if (valid) {
          this.$emit("topic-reject", params);
        } else {
          return false;
        }
      });
    },
    // 取消
    onCancel() {
      this.$emit("topic-cancel");
    }
  }
}
</script>
<style lang="scss" scoped>
.topic-info {
    .topic-title {
        color: #2b3b4e;
        font-size: 18px;
        line-height: 24px;
        font-weight: bold;
    }
    .topic-expand {
        color: #3a7fe8;
        font-size: 14px;
        cursor: pointer;
        margin-left: 10px;
    }
    .topic-input-select {
        width: 100%;
    }
    .topic-form-title {
        ::v-deep .el-form-item__label {
            font-weight: bold;
        }
    }
    .bottom-btn {
        margin-bottom: 10px;
    }
}
</style>
